<template>

	<el-form
		ref="myForm"
		:model="formData"
		:rules="rules"
	>
		<el-form-item prop="adminAccount" label="用户名">
			<el-input v-model="formData.adminAccount"></el-input>
		</el-form-item>
		<el-form-item prop="adminPassword" label="密码">
			<el-input v-model="formData.adminPassword"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="login(myForm)">登录</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
	

	import { ElMessage } from 'element-plus';
	import { reactive,ref } from 'vue';
	import {Login} from "../api"
	import { useRouter } from 'vue-router';
	const router=useRouter()
	let myForm=ref(null)
	let formData=reactive({
		adminAccount:"",
		adminPassword:""
	})
	
	const checkUserName=(rule,value,callback)=>{
		//console.log(value)
		let reg=/^[a-z]{3,}$/
		if(value.trim()==""){
			callback(new Error("用户名不能为空"))
		}else if(!reg.test(value.trim())){
			callback(new Error("用户名只能是3个及以上字母"))
		}else{
			callback()
		}
	}
	let rules=reactive({
		adminAccount:[
			{
				
				trigger:"blur",
				validator:checkUserName
			},
		],
		adminPassword:[
			{
				required:true,
				trigger:"blur",
				message:"密码不能为空"
			},
		]
	})
	
	const login=(formEl)=>{
		//console.log(formEl)
		formEl.validate(async (valid,fields)=>{
			//console.log(valid)
			if(valid){
				let res=await Login(formData)
				console.log('组件res',res)
				ElMessage.success("登录成功");
				sessionStorage.setItem("token",res.authorization)
				sessionStorage.setItem("roleId",res.user.roleId)
				router.push("/")
			}
		})
	}
</script>

<style scoped>
	
</style>